<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>

<script src="../lib/three.js/build/three.min.js"></script>

<script type="text/javascript">

    var scene = null;
            var camera = null;
            var renderer = null;
            
            function init() {
                renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')    //绑定元素
                });
                renderer.setClearColor(0x000000);       
                scene = new THREE.Scene();          //创建场景
                
                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);    //创建照相机 ，添加属性 将照相机添加到场景中
                camera.position.set(5, 15, 25);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
                
                //var light = new THREE.PointLight(0xff0000,1.5,2);           //添加光照 。将光照添加到场景中
                var light = new THREE.PointLight(0xffffff, 2, 100);
                light.position.set(0,1.5,2);
                scene.add(light);
                
                var greenCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),         //创建立方体 添加到场景中
                        new THREE.MeshLambertMaterial({color: 0x00ff00}));
                greenCube.position.x = 3;
                scene.add(greenCube);
                
                var whiteCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),          //创建立方体 添加到场景中
                        new THREE.MeshLambertMaterial({color: 0xffffff}));
                whiteCube.position.x = -3;
                scene.add(whiteCube);
                
                renderer.render(scene, camera);     //绘制
            }

</script>
</body>

</html>

<!--
    THREE.PointLight(hex, intensity, distance)
其中， hex 是光源十六进制的颜色值； intensity 是亮度，缺省值为 1 ，表示 100%亮
度； distance 是光源最远照射到的距离，缺省值为 0 。

    注意，这里光在每个面上的亮度是不同的，对于每个三角面片，将根据三个顶点的亮度进
行插值。
-->